000000 ランダム
 ホーム | 日記 | プロフィール 【フォローする】 【ログイン】

アフィリエイト用テンプレート 他




テンプレート 12


 width="500"(テーブル幅、500ピクセル)のテンプレート


 テーブルの背景を白にしてサイトの背景をカラフルなものにしてみました。
こういう動きのあるのもたまにはいいかな?という感じのテンプレです。

サンプル

 ***** タイトル *****

@1
バナーの説明文 a
あまり長く書くと縦の伸びちゃいますので数行にとどめてくださいね^^;
@2
@3
 b
@4
@5
@6
 



コピペ用タグ

<!--テーブル ここから-->
<table width="500" border="0" cellpadding="4" cellspacing="2" bgcolor="#ffffff"> <tr> <td>
<!--タイトルテーブル ここから--><table width="100%" border="0" cellspacing="2" cellpadding="4"> <tr> <td style="border-bottom: 3px solid #6666cc; border-left:1px solid #6666cc;"><font color="#6666cc" size="2"><strong>*****</strong></font> タイトル <strong><font color="#6666cc" size="2">*****</font></strong></td></tr> </table>
<!--タイトルテーブル ここまで-->
<br>
<!--画像貼り付けテーブル ここから-->
<table width="400" cellpadding="4" cellspacing=0 bgcolor="#ffffff" style=" margin-top: 0px; margin-left: 0px;"> <tbody> <tr height=100> <td width=100 align=center valign=middle bgcolor=#ffffff style="border: #6666cc 1px solid;">
<!--1行目 ここから-->
<table style="border:#6666cc 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@1</td></tr></tbody></table></td><td
valign=top align=left style="border-top: 1px solid #6666cc;">バナーの説明文 a<br>あまり長く書くと縦の伸びちゃいますので数行にとどめてくださいね^^;</td><td style="border: #6666cc 1px solid;" width=100 align=center valign=middle><table
style="border:#6666cc 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@2</td></tr></tbody></table></td></tr></tbody></table>
<!--1行目 ここまで-->
<!--2行目 ここから-->
<table width="400" cellpadding="4" cellspacing=0 bgcolor="#ffffff" style=" margin-top: -7px; margin-left: 80px;"><tbody> <tr height=100> <td
style="border: #6666cc 1px solid;" valign=middle align=center width=100 bgcolor=#ffffff><table
style="border: #6666cc 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@3</td></tr></tbody></table></td><td valign=top align=left style="border-top: 1px solid #6666cc;">b</td><td style="border: #6666cc 1px solid;" valign=middle align=center width=100><table
style="border:#6666cc 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@4</td></tr></tbody></table></td></tr></tbody></table>
<!--2行目 ここまで-->
<!--3行目 ここから-->
<table width="400" cellpadding="4" cellspacing=0 bgcolor="#ffffff" style=" margin-top: -7px; margin-left: 0px;"> <tbody> <tr height=100> <td
style="border: #6666cc 1px solid;" valign=middle align=center width=100 bgcolor=#ffffff><table
style="border: #6666cc 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@5</td></tr></tbody></table></td><td
valign=top align=left style="border-top: 1px solid #6666cc; border-bottom: 1px solid #6666cc;">c</td><td style="border: #6666cc 1px solid;" valign=middle align=center width=100><table
style="border:#6666cc 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@6</td></tr></tbody></table></td></tr></tbody></table>
<!--3行目 ここまで-->
 </td></tr> </table>
<!--外側のテーブル 終了-->




タグ解説

* テーブルの背景を白 bgcolor="#ffffff"にしてサイトの背景色をカラフルなものにしてみました。
こうするとサイトの背景色や画像がテーブルに写りこまないのですっきりして見えます。

ちなみにこの文章を書き込んでいるテーブルの中の背景色は指定してありませんので、外側のテーブルの背景色ががそのままこのテーブルの背景色になります。


* テーブルの色を変える場合は #~ を別のカラーコードを変えればOKです。

 ⇒ カラーコード一覧


* テーブルの幅を変えるには width="500"の数値を変えます。

* <font color="#6666cc" size="2"><strong>*****</strong></font> タイトル <strong><font color="#6666cc" size="2">*****</font></strong>
この部分の*****はは文字の太さと文字色を指定してあります。ご自由に変えてください。
間の”タイトル”は指定無しです。

*  style=" margin-top: ●px; margin-left: ▲px;" この部分で上のテーブルとの重なりと横へのずれを決めています。



使用例



 ***** タイトル *****

@1
バナーの説明文 a
あまり長く書くと縦の伸びちゃいますので数行にとどめてくださいね^^;
@2
@3
 b
@4
@5
c
@6
 

 ***** タイトル *****
サブタイトル(タイトルの説明など)
A 
@7
B 
@8
C 
@9
D 
@10
 
E 
@11
F 
@12
G 
@13
H 
@14
 
I 
@15
J 
@16
K 
@17
L 
@18
 
M 
@19
N 
@20
O 
@21
PH 
@22
 

<!--上のテーブル ここから-->
<table width="500" border="0" cellpadding="4" cellspacing="2" bgcolor="#ffffff"> <tr> <td><table width="100%" border="0" cellspacing="2" cellpadding="4"> <tr> <td style="border-bottom: 3px solid #ff0000; border-left:1px solid #ff0000;"> <font color="#ff0000" size="2"><strong>*****</strong></font> タイトル <strong><font color="#ff0000" size="2">*****</font></strong></td></tr> </table><br><table width="400" cellpadding="4" cellspacing=0 bgcolor="#ffffff" style=" margin-top: 0px; margin-left: 0px;"> <tbody> <tr height=100> <td width=100 align=center valign=middle bgcolor=#ffffff style="border: #ff0000 1px solid;"><table
style="border:#ff0000 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@1 </td></tr></tbody></table></td><td
valign=top align=left style="border-top: 1px solid #ff0000;">バナーの説明文 a<br>あまり長く書くと縦の伸びちゃいますので数行にとどめてくださいね^^;</td><td style="border: #ff0000 1px solid;" width=100 align=center valign=middle><table
style="border:#ff0000 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@2</td></tr></tbody></table></td></tr></tbody></table><table width="400" cellpadding="4" cellspacing=0 bgcolor="#ffffff" style=" margin-top: -7px; margin-left: 80px;"><tbody> <tr height=100> <td
style="border: #ff0000 1px solid;" valign=middle align=center width=100 bgcolor=#ffffff><table
style="border: #ff0000 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@3</td></tr></tbody></table></td><td valign=top align=left style="border-top: 1px solid #ff0000;"> b</td><td style="border: #ff0000 1px solid;" valign=middle align=center width=100><table
style="border:#ff0000 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@4</td></tr></tbody></table></td></tr></tbody></table><table width="400" cellpadding="4" cellspacing=0 bgcolor="#ffffff" style=" margin-top: -7px; margin-left: 0px;"> <tbody> <tr height=100> <td
style="border: #ff0000 1px solid;" valign=middle align=center width=100 bgcolor=#ffffff><table
style="border: #ff0000 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@5</td></tr></tbody></table></td><td
valign=top align=left style="border-top: 1px solid #ff0000; border-bottom: 1px solid #ff0000;">c</td><td style="border: #ff0000 1px solid;" valign=middle align=center width=100><table
style="border:#ff0000 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@6</td></tr></tbody></table></td></tr></tbody></table> </td></tr> </table>
<!--上のテーブル ここまで-->
<br>
<!-下のテーブル ここから--->
<table width="500" height="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> <tr> <td colspan="4"><table width="100%" border="0" cellspacing="2" cellpadding="4"> <tr> <td style="border-bottom: 3px solid #ff0000; border-left:1px solid #ff0000;"> <font color="#ff0000" size="2"><strong>*****</strong></font> タイトル <strong><font color="#ff0000" size="2">*****</font></strong></td></tr> </table></td></tr><tr><td colspan="4">サブタイトル(タイトルの説明など)</td></tr> <tr> <td width="25%" align="center" valign="top">
<!--左端のテーブル ここから-->
<table width="100%" border="0" cellspacing="2" cellpadding="4"> <tr> <td align="center" valign="middle" bgcolor="#ff0000">A </td></tr> <tr> <td align="center" valign="middle"><table
style="border:#ff0000 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@7</td></tr></tbody></table></td></tr> <tr> <td align="center" valign="middle" bgcolor="#ff0000">B </td></tr> <tr> <td align="center" valign="middle"><table
style="border:#ff0000 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@8</td></tr></tbody></table></td></tr> <tr> <td align="center" valign="middle" bgcolor="#ff0000">C </td></tr> <tr> <td align="center" valign="middle"><table
style="border:#ff0000 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@9</td></tr></tbody></table></td></tr> <tr> <td align="center" valign="middle" bgcolor="#ff0000">D </td></tr> <tr> <td align="center" valign="middle"><table style="border:#ff0000 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@10</td></tr></tbody></table> </td></tr> </table>
<!--左端のテーブル ここまで--></td><td width="25%" align="center">
<!--左から2番目のテーブル ここから-->
<table width="100%" border="0" cellspacing="2" cellpadding="4" style=" margin-bottom: -80px;"><tr> <td align="center" valign="middle" bgcolor="#ff0000">E</td></tr> <tr><td align="center" valign="middle"><table style="border:#ff0000 3px dotted;" height=85 width=85> <tbody> <tr><td valign=middle align=center>@11</td></tr></tbody></table></td></tr> <tr> <td align="center" valign="middle" bgcolor="#ff0000">F</td></tr> <tr> <td align="center" valign="middle"><table style="border:#ff0000 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@12</td></tr></tbody></table></td></tr> <tr> <td align="center" valign="middle" bgcolor="#ff0000">G</td></tr> <tr> <td align="center" valign="middle"><table style="border:#ff0000 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@13</td></tr></tbody></table></td></tr> <tr> <td align="center" valign="middle" bgcolor="#ff0000">H </td></tr> <tr> <td align="center" valign="middle"><table style="border:#ff0000 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@14</td></tr></tbody></table></td></tr> </table>
<!--左から 2番目のテーブル ここまで--></td><td width="25%" align="center" valign="top" >
<!--左から3番目のテーブル ここから-->
<table width="100%" border="0" cellspacing="2" cellpadding="4"> <tr> <td align="center" valign="middle" bgcolor="#ff0000">I </td></tr> <tr> <td align="center" valign="middle"><table
style="border:#ff0000 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@15</td></tr></tbody></table></td></tr> <tr> <td align="center" valign="middle" bgcolor="#ff0000">J </td></tr> <tr> <td align="center" valign="middle"><table style="border:#ff0000 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@16</td></tr></tbody></table></td></tr> <tr> <td align="center" valign="middle" bgcolor="#ff0000">K </td></tr> <tr> <td align="center" valign="middle"><table style="border:#ff0000 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@17</td></tr></tbody></table></td></tr> <tr> <td align="center" valign="middle" bgcolor="#ff0000">L </td></tr> <tr> <td align="center" valign="middle"><table
style="border:#ff0000 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@18</td></tr></tbody></table> </td></tr> </table>
<!--左から3番目のテーブル ここまで--></td><td width="25%" align="center">
<!--右端のテーブル ここから-->
<table width="100%" border="0" cellspacing="2" cellpadding="4" style=" margin-bottom: -80px;"> <tr> <td align="center" valign="middle" bgcolor="#ff0000">M </td></tr> <tr> <td align="center" valign="middle"><table
style="border:#ff0000 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@19</td></tr></tbody></table></td></tr> <tr> <td align="center" valign="middle" bgcolor="#ff0000">N </td></tr> <tr> <td align="center" valign="middle"><table style="border:#ff0000 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@20</td></tr></tbody></table></td></tr> <tr> <td align="center" valign="middle" bgcolor="#ff0000">O </td></tr> <tr> <td align="center" valign="middle"><table style="border:#ff0000 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@21</td></tr></tbody></table></td></tr> <tr> <td align="center" valign="middle" bgcolor="#ff0000">P </td></tr> <tr> <td align="center" valign="middle"><table style="border:#ff0000 3px dotted;" height=85 width=85> <tbody> <tr> <td valign=middle align=center>@22</td></tr></tbody></table> </td></tr> </table></td></tr> </table> 
* <br>で区切られるパーツになっています




© Rakuten Group, Inc.
X